<template>
	<view>
		<view class="uni-list">
			<view class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="(item, key) in articles" :key="key">
				<view class="uni-list-cell-navigate uni-navigate-right uni-media-list" @click="showLittleKnow(item.id)">
					<view class="uni-media-list-logo">
						<image :src="item.user.avatar != null ? item.user.avatar : 'http://thirdqq.qlogo.cn/g?b=oidb&k=gfX9ZPWk6sACVCzibNY5fnw&s=140&t=1558407034'"></image>
					</view>
					<view class="uni-media-list-body">
						<view class="uni-media-list-text-top">{{ item.title }}</view>
						<view class="uni-media-list-text-bottom uni-ellipsis" v-html="item.content"></view>
					</view>
				</view>
			</view>
		</view>
		<uni-load-more :contentText="contentText" :status="status"></uni-load-more>
	</view>
</template>

<script>
import uniList from '@/components/uni-list/uni-list.vue';
import uniListItem from '@/components/uni-list-item/uni-list-item.vue';
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
var _self;

export default {
	data() {
		return {
			articles: [],
			page: 1,
			size: 15,
			status: 'more', // 列表的状态 more还有更多 loading正在加载 noMore没有了
			contentText: {
				contentdown: "上拉显示更多",
				contentrefresh: "正在加载...",
				contentnomore: "没有更多评论了"
			}
		}
	},
	onLoad() {
		_self = this;

		this.getCommons()
	},
	methods: {
		getCommons: function() {
			uni.request({
				url: _self.websiteUrl + '/commentarticle/my',
				method: 'POST',
				header: {
					'content-type': 'application/x-www-form-urlencoded'
				},
				data: {
					'token': uni.getStorageSync("token").token,
					'page': _self.page,
					'size': _self.size
				},
				success: res => {
					_self.articles = _self.articles.concat(res.data.payload.records)
					const data = res.data.payload
					if (data.current >= data.pages) {
						_self.status = 'noMore'
					} else {
						_self.status = 'more'
					}
				},
				fail: () => {
					_self.status = 'noMore'
				}
			});
		},
		showLittleKnow: function(index) {
			uni.navigateTo({
				url: '/pages/index/littleknow/littleknow?id=' + index
			});
		}
	},
	components: { uniList, uniListItem, uniLoadMore },
	onPullDownRefresh() {
		// 下拉刷新
		_self.articles = []
		_self.page = 1;
		this.getCommons()
		uni.stopPullDownRefresh();
	},
	onReachBottom: function() {
		// 监听是否滑倒页面底部，滑到就去加载新的一页新闻列表
		_self.status = 'loading';
		_self.page++
		_self.getCommons();
	},
}
</script>

<style></style>
